<template>
  <div class="editVisual">
    <div class="title">
      <Button style="margin-right: 10px;">撤销</Button>
      <Button style="margin-right: 10px;">清空</Button>
      <Button style="margin-right: 10px;">插入图片</Button>
    </div>
    <div class="content">
      <div class="component-list">
        <div class="header-title">组件列表</div>
        <div @dragstart="handleDragStart" class="components-content">
          <div
            v-for="(item, index) in componentList"
            :key="index"
            class="components-list"
            draggable
            :data-index="index"
          >
            <i :class="item.icon"></i>
            <span>{{ item.label }}</span>
          </div>
        </div>
      </div>
      <div
        class="content-canvas"
        @drop="handleDrop"
        @dragover="handleDragOver"
        @mouseup="deselectCurComponent"
        id="canvasContent"
      >
        <div
          v-for="(item, index) in componentData"
          :key="item.id"
          @mousedown="componenetsMouseDown($event, item, index)"
        >
          <component
            :is="item.component"
            :style="item.style"
            :propValue="item.propValue"
            :id="item.id"
            style="position: absolute;"
          />
        </div>
      </div>
      <div class="property-bar">
        <div class="header-title">属性栏</div>
        <div></div>
      </div>
    </div>
  </div>
</template>
<script>
import VButton from "./component/VButton.vue";
import VText from "./component/VText.vue";
import Picture from "./component/Picture.vue";
import VPie from "./component/pie.vue";
import { deepCopy } from "@/utils/util";

export default {
  components: { VButton, VText, Picture, VPie },
  data() {
    return {
      componentList: [
        {
          label: "按钮",
          type: "button",
          component: "VButton",
          propValue: {
            name: "姓名1",
            style: {
              top: "0px",
              left: "0px",
              fontSize: "14px",
              fontWeight: "600",
            },
          },
        },
        {
          label: "文本框",
          type: "text",
          component: "VText",
          propValue: {
            name: "姓名1",
            style: {
              top: "0px",
              left: "0px",
              fontSize: "14px",
              fontWeight: "600",
            },
          },
        },
        {
          label: "饼图",
          type: "pie",
          component: "VPie",
          id: "pie",
          propValue: {
            id: "pei1",
            title: "姓名1",
            option: [],
            style: {
              top: "0px",
              left: "0px",
              width: "450px",
              height: "300px",
              fontSize: "14px",
              fontWeight: "600",
            },
          },
        },
      ],
      componentData: [],
      canvasTop: 0,
      canvasLeft: 0,
    };
  },
  methods: {
    handleDragStart(e) {
      e.dataTransfer.setData("index", e.target.dataset.index);
    },
    handleDrop(e) {
      console.log("_handle_结束_", e, e.dataTransfer.getData("index"));
      e.preventDefault();
      e.stopPropagation();
      const index = e.dataTransfer.getData("index");
      if (index) {
        let component = deepCopy(this.componentList[index]);
        component.propValue.style.top = e.clientY - this.canvasTop + `px`;
        component.propValue.style.left = e.clientX - this.canvasLeft + `px`;
        this.componentData.push(component);
      }
      // this.$store.commit("addComponent", component);
    },
    handleDragOver(e) {
      e.preventDefault();
    },
    componenetsMouseDown(e, item, index) {
      console.log("item___", e, index);
      e.stopPropagation();
      const startTop = Number(e.layerY);
      const startLeft = Number(e.layerX);
      console.log("__距离content top ___", startTop);
      console.log("__距离content left ___", startLeft);
      const move = (moveEvent) => {
        const currX = moveEvent.clientX;
        const currY = moveEvent.clientY;
        console.log("_moveEvent__",moveEvent, currY, currX);
        console.log("_canvas_", this.canvasTop, this.canvasLeft);
        this.componentData[index].propValue.style.top =
          currY - this.canvasTop - startTop + "px";
        this.componentData[index].propValue.style.left =
          currX - this.canvasLeft - startLeft + "px";
      };

      const up = () => {
        console.log(
          "_this.componentData[index]___",
          this.componentData[index].propValue.style.top,
          this.componentData[index].propValue.style.left
        );
        document.removeEventListener("mousemove", move);
        document.removeEventListener("mouseup", up);
      };
      document.addEventListener("mousemove", move);
      document.addEventListener("mouseup", up);
    },
    getFatherReact() {
      let dom = document.getElementById("canvasContent");
      console.log("dom__", dom);
      if (dom) {
        let rect = dom.getBoundingClientRect();
        console.log("_rect__", rect);
        this.canvasTop = rect.y;
        this.canvasLeft = rect.x;
      }
    },
    deselectCurComponent(e) {},
  },
  mounted() {
    this.getFatherReact();
  },
};
</script>
<style lang="less" scoped>
.editVisual {
  width: 100%;
  height: 100%;

  .content {
    display: flex;
    .component-list {
      width: 200px;
      .header-title {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 600;
      }
      .components-content {
        display: flex;
        .components-list {
          margin: 0 6px;
          border: 1px solid #ccc;
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 30px;
          width: 60px;
        }
      }
    }

    .content-canvas {
      position: relative;
      width: 1408px;
      height: 792px;
      background-color: #fff;
      border: 1px solid #ccc;
      margin: 20px 10px;
    }
  }
}
</style>
